import {Component, OnInit} from "@angular/core";
import {ActivatedRoute} from "@angular/router";
import {DataDataSource} from "../device-control/device-ctrl.component";
import {BillService, DocService, PowerService} from "../../energy/api";
import {ElectricityService} from "../../@core/mock/electricity.service";
import {UnitInfo} from "../../energy/api/model/unitInfo";
import {NbDateService} from "@nebular/theme";
import {BaseRequest} from "../../utils/BaseRequest";
import {PowerExtraService} from "../../energy/api/api/powerExtra.service";
import {DailyElectricityConsumptionData} from "../../energy/api/model/dailyElectricityConsumptionData";
import {UnitChargeBill} from "../../energy/api/model/unitChargeBill";

@Component({
  template: `
      <div class="row">
          <div class="col-md-6">
              <nb-card>
                  <nb-card-header>单元信息</nb-card-header>
                  <nb-card-body style="max-height: 400px;overflow: auto;">
                      <div class="row">
                          <div class="col-md-6">
                              <nb-list>
                                  <nb-list-item>
                                      <label>单元编号</label><input nbInput fullWidth [(ngModel)]="unit.unitNo"
                                                                placeholder="单元编号">
                                  </nb-list-item>
                                  <nb-list-item>
                                      <label>单元名称</label><input nbInput fullWidth [(ngModel)]="unit.unitName"
                                                                placeholder="单元名称">
                                  </nb-list-item>
                                  <nb-list-item>
                                      <label>地址</label><input nbInput fullWidth [(ngModel)]="unit.address"
                                                              placeholder="地址">
                                  </nb-list-item>
                                  <nb-list-item>
                                      <label>均摊面积</label><input nbInput fullWidth [(ngModel)]="unit.grossArea"
                                                                placeholder="均摊面积">
                                  </nb-list-item>
                              </nb-list>
                          </div>
                          <div class="col-md-6">
                              <nb-list>
                                  <nb-list-item>
                                      <label>联系人</label><input nbInput fullWidth [(ngModel)]="unit.contract"
                                                               placeholder="联系人">
                                  </nb-list-item>
                                  <nb-list-item>
                                      <label>联系电话</label><input nbInput fullWidth [(ngModel)]="unit.contractTel"
                                                                placeholder="联系电话">
                                  </nb-list-item>
                                  <nb-list-item>
                                      <label>楼层</label><input nbInput fullWidth [(ngModel)]="unit.floorName"
                                                              placeholder="楼层">
                                  </nb-list-item>
                                  <nb-list-item>
                                      <label>限额</label>
                                      <input nbInput fullWidth [(ngModel)]="unit.limit"
                                             placeholder="限额">
                                  </nb-list-item>
                              </nb-list>
                          </div>
                      </div>
                      <div class="row">
                          <div class="col-md-12">
                              <nb-list>
                                  <nb-list-item>
                                      <label>备注</label>
                                      <textarea nbInput fullWidth [(ngModel)]="unit.extInfo" rows="6"></textarea>
                                  </nb-list-item>
                              </nb-list>
                          </div>
                      </div>
                  </nb-card-body>
              </nb-card>
          </div>
          <div class="col-md-6">
              <div class="row">
                  <div class="col-md-6">
                      <nb-card status="info">
                          <nb-card-header style="color: white">账户余额</nb-card-header>
                          <nb-card-body>{{unit.balance}}
                              <i class="fa fa-yen-sign"></i>
                          </nb-card-body>
                      </nb-card>
                  </div>
                  <div class="col-md-6">
                      <nb-card status="warning">
                          <nb-card-header style="color: white">昨日用量</nb-card-header>
                          <nb-card-body>{{yesterdayBill==null?'0':yesterdayBill.totalAmt}}
                              <i class="fa fa-bolt"></i>
                          </nb-card-body>
                      </nb-card>
                  </div>
              </div>
              <nb-card status="danger">
                  <nb-card-header style="color: white">出账情况</nb-card-header>
                  <nb-card-body>
                      <p *ngIf="noBill">无近日账单</p>
                      <div *ngIf="!noBill" echarts [options]="billOption" style="width:100%;height:250px"></div>
                  </nb-card-body>
              </nb-card>
          </div>
      </div>
      <nb-card>
          <nb-card-body>
              <nb-tabset>
                  <nb-tab tabTitle="表计列表">
                      <device-ctrl-component [unitId]="unit.unitId" [showFilter]="false"></device-ctrl-component>
                  </nb-tab>
                  <nb-tab tabTitle="用户列表">
                      <user-document-component [unitId]="unit.unitId" [showFilter]="false"></user-document-component>
                  </nb-tab>
                  <nb-tab tabTitle="费率列表">
                      <unit-rate-component [unitId]="unit.unitId" [unitName]="unit.unitName"></unit-rate-component>
                  </nb-tab>
              </nb-tabset>
          </nb-card-body>
      </nb-card>
  `
})
export class UnitDetailComponent implements OnInit {
  public static unit: UnitInfo = {};
  unit: UnitInfo;
  billOption = {};
  startTime: Date;
  endTime: Date;
  noBill = false;
  yesterdayBill:UnitChargeBill;
  constructor(private route: ActivatedRoute, private docApi: DocService, private billApi: BillService,private powerApi:PowerExtraService, private dateService: NbDateService<Date>) {
    this.startTime = this.dateService.addDay(this.dateService.today(), -30);
    this.endTime = this.dateService.today();
    this.unit = UnitDetailComponent.unit;
  }

  ngOnInit(): void {
    const query = {
      pageIndex: 0,
      pageSize: 200,
      queryType: "1",
      startTime: this.dateService.format(this.startTime, "yyyyMMdd"),
      endTime: this.dateService.format(this.endTime, 'yyyyMMdd'),
      unitId: this.unit.unitId.toString()
    };
    this.billApi.requestECAUnitChargeBill(new BaseRequest(query)).subscribe(res => {
      if (res.dataCount == 0) {
        this.noBill = true;
        return;
      }
      this.yesterdayBill = res.data[0];
      const data = res.data.map(value => [new Date(value.billCreateDate), value.totalAmt]);
      this.billOption = {
        xAxis: {
          type: 'time',
        },
        yAxis: {
          type: 'value'
        },
        series: [{
          data: data,
          type: 'line',
        }]
      }
    });
  }
}
